<template>
  <!-- 主要登录容器 -->
  <div class="login-wrapper">
    <!-- 输入区域，包含登录表单 -->
    <div class="login-form">
      <!-- 登录标题 -->
      <h2 class="title">欢迎登录</h2>
      <!-- 账号输入区域 -->
      <div class="input-group">
        <label class="input-label">账号</label>
        <el-input 
          v-model="loginInfo.number" 
          placeholder="请输入账号" 
          clearable>
        </el-input>
      </div>
      <!-- 密码输入区域 -->
      <div class="input-group">
        <label class="input-label">密码</label>
        <el-input 
          v-model="loginInfo.pws" 
          type="password" 
          placeholder="请输入密码" 
          clearable>
        </el-input>
      </div>
      <!-- 验证码输入区域 -->
      <div class="input-group code-group">
        <label class="input-label">验证码</label>
        <div class="code-input-wrapper">
          <el-input 
            v-model="loginInfo.code" 
            type="text" 
            placeholder="请输入验证码" 
            clearable>
          </el-input>
          <div class="code-display" v-html="code"></div>
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="button-group">
        <el-button 
          type="primary" 
          class="login-button"
          @click="login">
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件的data函数，返回对象包含登录表单的数据和验证码
  data() {
    return {
      loginInfo: {
        number: '', // 用户名
        pws: '', // 密码
      },
      code: null // 验证码
    }
  },
  // 组件挂载后调用的方法，用于获取验证码
  mounted() {
    this.getCode()
  },
  // 组件的方法定义
  methods: {
    // 获取验证码的方法
    getCode() {
      this.$http.get('/users/backend/code').then(res => {
        if (res.data.code === 1) {
          console.log(res)
          this.code = res.data.data.data // 将获取的验证码设置到data中
        }
      })
    },
    // 登录方法
    login() {
      // 验证用户名和密码是否已输入
      if (!this.loginInfo.number) {
        this.$message('请输入账号')
        return
      }
      if (!this.loginInfo.pws) {
        this.$message('请输入密码')
        return
      }

      // 发送登录请求
      this.$http.post('/users/backend/login', { username: this.loginInfo.number, password: this.loginInfo.pws }).then((res) => {
        if (res.data.code === 1) {
          // 登录成功，保存token和用户信息到localStorage，并跳转到用户页面
          this.$message('登录成功')
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('userinfo', JSON.stringify(res.data.user))
          this.$router.push('/user')
        } else {
          // 登录失败，显示错误消息
          this.$message(res.data.message)
        }
      })
      .catch(() => {
        this.$message('登录失败')
      })
    },
  },
}
</script>

<style scoped>
/* 主要登录容器 */
.login-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%,#ff00a6 100%); /* 迷人的渐变背景 */
}

/* 登录表单样式 */
.login-form {
  width: 500px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明的白色背景 */
  border-radius: 10px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  backdrop-filter: blur(5px); /* 背景模糊效果 */
}

/* 标题样式 */
.title {
  color: #fff; /* 白色文字 */
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  background: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* 渐变文字颜色 */
  animation: glow 5s infinite; /* 动画效果 */
}

/* 动画效果 */
@keyframes glow {
  0%, 100% { text-shadow: 0 0 10px #ff9a9e; }
  50% { text-shadow: 0 0 20px #fad0c4; }
}

/* 输入组样式 */
.input-group {
  position: relative;
  margin-bottom: 20px; /* 增加间隔 */
}

/* 输入标签样式 */
.input-label {
  display: block;
  margin-bottom: 5px;
  color: #333; /* 深色文字 */
}

/* 输入框样式 */
.el-input__inner {
  border-radius: 24px; /* 圆角边框 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
  padding: 0 15px; /* 内边距 */
  transition: border-color 0.3s; /* 边框颜色变化动画 */
}

.el-input__inner:focus {
  border-color: #667eea; /* 聚焦时的边框颜色 */
}

/* 验证码输入区域样式 */
.code-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* 增加间隔 */
}

/* 验证码显示容器样式 */
.code-display {
  margin-left: 10px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer; /* 鼠标悬浮时显示手形图标 */
  transition: transform 0.3s; /* 平滑缩放 */
}

.code-display:hover {
  transform: scale(1.05); /* 鼠标悬浮时放大 */
}

/* 登录按钮样式 */
.login-button {
  width: 100%;
  padding: 10px;
  border-radius: 20px; /* 更大的圆角 */
  background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 渐变背景 */
  color: white;
  box-shadow: 0 2px 6px rgba(255, 158, 158, 0.4); /* 添加按钮阴影 */
  transition: transform 0.3s; /* 平滑缩放 */
}

.login-button:hover {
  transform: translateY(-2px); /* 鼠标悬浮时上移 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-form {
    width: 90%;
    padding: 20px;
  }
}
</style>